<template>
  <div class="home">
    <el-container>
      <el-header>
        <div>
          <img src="../../public/home-img1.png" alt="" />
          <span>数据服务系统</span>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-user" class="btns"
            >Admin</el-button
          >
          <img src="../../public/tongZhi.png" alt="" class="tongZhi" />
          <el-button type="primary" @click="tui" class="btns">退出</el-button>
        </div>
      </el-header>
      <div id="xian"></div>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="2" class="el-menu-vertical-demo">
                <el-menu-item index="1" disabled>
                  <i class="el-icon-date"></i>
                  <span slot="title">业务管理</span>
                </el-menu-item>
                <el-menu-item index="2" @click="$router.push('/home/order')">
                  <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item
                  index="3"
                  @click="$router.push('/home/shopcontrol')"
                >
                  <span slot="title">商品管理</span>
                </el-menu-item>
                <el-menu-item
                  index="4"
                  @click="$router.push('/home/members_list')"
                >
                  <span slot="title">会员列表</span>
                </el-menu-item>
                <el-menu-item index="5" disabled>
                  <i class="el-icon-date"></i>
                  <span slot="title">内容管理</span>
                </el-menu-item>
                <el-menu-item index="6" @click="$router.push('/home/hcm')">
                  <span slot="title">首页栏目管理</span>
                </el-menu-item>
                <el-menu-item
                  index="7"
                  @click="$router.push('/home/searchWord')"
                >
                  <span slot="title">搜索词管理</span>
                </el-menu-item>
                <el-menu-item
                  index="8"
                  @click="$router.push({ name: 'service' })"
                >
                  <span slot="title">服务说明</span>
                </el-menu-item>
                <el-menu-item index="9" @click="$router.push('/home/hotsell')">
                  <span slot="title">热销榜配置</span>
                </el-menu-item>
                <el-menu-item index="10" disabled>
                  <i class="el-icon-date"></i>
                  <span slot="title">权限管理</span>
                </el-menu-item>
                <el-menu-item index="11" @click="$router.push('/home/account')">
                  <span slot="title">账号管理</span>
                </el-menu-item>
                <el-menu-item
                  index="12"
                  @click="$router.push('/home/jueSeGuanLi')"
                >
                  <span slot="title">角色管理</span>
                </el-menu-item>
                <el-menu-item
                  index="13"
                  @click="$router.push('/home/department')"
                >
                  <span slot="title">部门管理</span>
                </el-menu-item>
                <el-menu-item index="14" @click="privilege">
                  <span slot="title">权限管理</span>
                </el-menu-item>
                <el-menu-item index="15" disabled>
                  <i class="el-icon-date"></i>
                  <span slot="title">系统管理</span>
                </el-menu-item>
                <el-menu-item index="16" @click="$router.push('/home/log')">
                  <span slot="title">操作日志</span>
                </el-menu-item>
                <el-menu-item index="17" @click="$router.push('/home/service')">
                  <span slot="title">客服管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <!-- 主内容 -->
        <el-main style="overflow: scroll">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
export default {
  name: "home",
  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {
    tui() {
      this.$router.push("/");
    },
    privilege() {
      this.$router.push("/home/privilege");
    },
  },
};
</script>
<style lang='scss' scoped>
.el-header {
  height: 70px !important;
  background: linear-gradient(to right, #495bff, #20a4fe);
  color: #333;
  text-align: center;
  line-height: 70px;
  display: flex;
  justify-content: space-between;

  img {
    width: 56px;
    margin-left: -18px;
    margin-bottom: -20px;
    vertical-align: -4px;
  }
  .btns {
    height: 100%;
    border-radius: 0px;
    border: none;
    background: #2898ff;
  }
  span {
    font-weight: 800;
    font-size: 20px;
    color: white;
    font-weight: 200;
  }

  .tongZhi {
    margin-left: 20px;
    margin-right: 14px;
    width: 30px;
    vertical-align: 10px;
  }
}
.btns:hover {
  background: #228de6;
}
#xian {
  width: 100%;
  height: 2px;
  background: #2b64cc;
  border: none;
}

.el-aside {
  width: 272px !important;
  height: calc(100vh - 74px);
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  text-align: left;

  span {
    font-size: 18px;
    font-weight: 900;
    margin-left: 30px;
  }
}

.el-main {
  height: calc(100vh - 74px);
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  padding: 0;
  /* line-height: 160px; */
}
.el-menu-item.is-disabled {
  opacity: 1;
  color: #999;
  cursor: not-allowed;
  margin-left: -30px;
  background: #f2f2f2 !important;
}
.el-icon-date:before {
  margin-right: -50px;
}
body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo {
  width: 250px;
}
</style>